<template>
    <section>
        <div class="square-box">
            <p>房地产交易中心</p>
            <div class="box">
                <div class="zhsl"></div>
                <p class="font1">
                    11<span>次</span></p>
                <p>综合受理取号</p>
            </div>
            <div class="box" style="height: 193px;">
                <div class="fdc"></div>
                <p class="font1">
                   111<span>次</span></p>
                <p>网上房地产<br/>取号</p>
            </div>
            <div class="box">
                <div class="zlcy"></div>
                <p class="font1">
                    111<span>次</span></p>
                <p>资料查阅取号</p>
            </div>
            <div class="box">
                <div class="fzqh"></div>
                <p class="font1">
                    222<span>次</span></p>
                <p>发证取号</p>
            </div>
        </div>
    </section>
</template>

<script>
    import ICountUp from 'vue-countup-v2'
    export default {
        name: 'square-box-one',
        components: {
            ICountUp,
        },
        props:['indexData'],
        data () {
            return {

            }
        },
        mounted(){

        },
        methods: {
            onReady(instance, CountUp) {
                instance.update();
            },
        },
        watch:{
        }
    }

</script>
<style lang="less" scoped>
    .square-box{
        z-index: 20;
        width: 220px;
        p{
            font-size: 36px;
            color: #2dfcff;
            text-align: center;
        }
        .box{
            width: 180px;
            height: 160px;
            background-color:rgba(45,252,255,0.1);
            border-radius: 20px;
            margin-top: 24px;
            overflow: hidden;
            p{
                text-align: center;
                font-size: 28px;
                span{
                    font-size: 20px;
                    font-weight:bold;
                }
            }
            .font1{
                font-size: 32px;
                color: #fac702;
                font-weight:bold;
            }
        }
    }
    .fdc{
        width: 40px;
        height: 40px;
        background-image: url('./img/fdc.png');
        margin: 16px auto 10px auto;
    }
    .fzqh{
        width: 37px;
        height: 40px;
        background-image: url('./img/fzqh.png');
        margin: 16px auto 10px auto;
    }
    .zhsl{
        width: 44px;
        height: 41px;
        background-image: url('./img/zhsl.png');
        margin: 16px auto 10px auto;
    }
    .zlcy{
        width: 40px;
        height: 40px;
        background-image: url('./img/zlcy.png');
        margin: 16px auto 10px auto;
    }
</style>
